import './charLsit.css'

const friendList = [1,1,1,1,1,1,1,1,11,1,1,1,1]
const myIndex = 0;
const ChatList = () => {
    return(
        <div className="chatList">
            <div className="search">
                <div className="search-input">
                    <img src="../../../../public/search.png" alt=""/>
                    <input type="text" placeholder="请输入内容"/>
                </div>
                <img src="../../../../public/plus.png" alt=""/>
            </div>
            <div className="buttom-list">
                {
                    friendList.map((element, index) => (
                        <div key={index} className={`list-container ${myIndex === index ? 'native' : ''} `}>
                            <img src="../../../../public/avatar.png" alt=""/>
                            <div className="list-user">
                                <h3>HutuD-friend</h3>
                                <span>hello</span>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

export default ChatList